import React from 'react';
import { Button, Form, Input, Row, Col, message } from 'antd';
import { AsyncSelect, FormList } from '@ecoding/components.antd';
import { ruleRequired, ruleLinkValid, ruleNumberValid, ruleEmailValid, rulesGreater } from '@ecoding/components.antd.rules';

const C: React.FC = () => {
    const [form] = Form.useForm(); // 该组件内form全局变量
    const onFinish = async () => {
        try {
            const values = await form.validateFields(); // drawer内表单验证并获得表单提交的值
            console.log(values)
            // 存，提交接口保存
        } catch (e: any) {
            console.log(e);
            const errorField = e?.errorFields && e?.errorFields[0];
            if (errorField) {
                message.error(errorField.errors);
            }
        }
    };
    return (
        <Form form={form} layout="vertical" labelCol={{ span: 6 }}>
            <Row gutter={20}>
                <Col span={12}>
                    <Form.Item name="field1" label="必填" rules={[ruleRequired("必填")]}>
                        <AsyncSelect
                            data={{
                                datas: [
                                    { label: 'page', value: 'page' },
                                    { label: 'api', value: 'api' }
                                ]
                            }}
                            placeholder="请选择"
                        />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name="field2" label="链接" rules={[ruleLinkValid("格式不正确")]}>
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name="field3" label="数字" rules={[ruleRequired("必填"), ruleNumberValid("格式不正确")]}>
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name="field4" label="邮箱" rules={[ruleEmailValid("格式不正确")]}>
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <FormList
                        name="columnParams"
                        rules={[rulesGreater("至少添加一项", 1)]}
                        columns={[
                            {
                                title: '源表头名',
                                name: 'sourceColumn',
                                render: (field, index) => null
                            }
                        ]}
                    />
                </Col>
            </Row>
            <div className="tar">
                <Button type="primary" onClick={onFinish}> 提交 </Button>
            </div>
        </Form>
    );
};

export default C;
